<template>
  <div>
    <codemirror
      ref="codeMirrorRef"
      :value="code"
      @input="onCodeChange"
      :options="editorOptions"
    />
    <button @click="formatSql">格式化SQL</button>
  </div>
</template>

<script>
import { codemirror, CodeMirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'; // SQL mode for syntax highlighting
import sqlFormatter from 'sql-formatter';
import 'codemirror/lib/codemirror.css'
export default {
  components: {
    codemirror
  },
  data() {
    return {
      code: '', // 初始SQL代码
      editorOptions: {
        mode: 'text/x-sql', // SQL模式
        theme: 'default', // 主题
        lineNumbers: true, // 显示行号
        // 其他配置...
      },
    };
  },
  methods: {
    onCodeChange(newValue) {
      this.code = newValue;
    },
    formatSql() {

      // 使用sql-formatter格式化SQL代码
      const formattedSql = sqlFormatter.format(this.code);
      // 更新CodeMirror的值
      this.$refs.codeMirrorRef.codemirror.setValue(formattedSql);
    },
  },
};
</script>

<style>
</style>